<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Sencha Touch Test</title>
<link rel="stylesheet" href="sencha-touch/resources/css/sencha-touch.css"
	type="text/css">
<link rel="stylesheet" href="sencha-touch/resources/css/apple.css" type="text/css">
<script type="text/javascript"
	src="http://maps.google.com/maps/api/js?sensor=true"></script>
<script type="text/javascript" src="sencha-touch/sencha-touch-debug.js"></script>
<script type="text/javascript">
	Ext.setup({
	    icon: 'icon.png',
	    tabletStartupScreen: 'tablet_startup.png',
	    phoneStartupScreen: 'phone_startup.png',
	    glossOnIcon: false,
	    onReady: function() {
	    	var tabpanel = new Ext.TabPanel({
	    		                tabBar: { // an Ext.TabBar configuration
	    		                    dock: 'bottom', //the tabbar position
	    		                    layout: {
	    		                         pack: 'center' // the icon position
	    		                    }
	    		                },
	    		                fullscreen: true, //this component will take up the full width and height of the screen and automatically renders the component to the page
	    		                cardSwitc hAnimation: {
	    		                    type: 'pop',
	    		                    cover: true
	    		                },
	    		                items: [{
	    		                    title: 'Schedule',
	    		                    iconCls: 'time',// the button icon
	    		                    cls: 'card1', // an optional extra CSS class will be added to this component's element.
	    		                    id: 'tab1',
	    		                    dockedItems: [{
	    		                        xtype: 'toolbar',
	    		                        ui: 'light',
	    		                        dock: 'top',
	    		                        items: [
	    		                            tvTitle ,
	    		                            { xtype: 'spacer' },
	    		                            { text: 'Change...', ui: 'action', handler: function() {tvPicker.show();} },
	    		                        ]
	    		                    }, {
	    		                    xtype: 'panel',
	    		                    dock: 'bottom',
	    		                    height: 48,
	    		                    html: ''
	    		                }],
	    		                    items: [
	    		                        tvList
	    		                    ]
	    		                }, {
	    		                    title: 'About',
	    		                    html: '<table border="0" align="center" width="95%"><tr><td align="left"><br />'
	    		                    +'<h1>Sport on TV</h1><br />Version 1.0 for iPhone<br />Using <a style="color:#000;text-decoration:none;" href="http://www.sencha.com/">Sencha Touch</a> framework.<br /><br /><br />'
	    		                    +'<h1>Help</h1><br />Instantly discover what, when and where there is live sport on TV in the UK. (All times are GMT.)<br />To browse the schedule, tap <strong>Change...</strong> and select a sport and TV network. For additional information, tap the fixture.<br /><br /><br />'
	    		                    +'<h1>Disclaimer</h1><br />Although every effort is made to ensure schedule information provided within the app is accurate, we can make no guarantee that it is always correct and can not accept responsibility for inaccurate information. Please double-check any fixtures that are important to you to avoid disappointment. Please also note that this app does not claim to stream video; it is a tool to display schedules of live sporting events on TV in the UK.<br /><br /><br />',
	    		                    cls: 'card4',
	    		                    styleHtmlContent: true,
	    		                    iconCls: 'info',
	    		                    id: 'tab2'
	    		                }]
	    		            });
	    		            tvStore.load();
	    }
	});
	Ext.regModel('tvGuide', {
		fields: ['tvSport', 'tvComp', 'tvChannel', 'tvGroup', 'tvDay', 'tvTime', 'tvFixture', 'tvIcon']
		            });
	    var tvStore = new Ext.data.Store({
              id: 'tvLocal',
              model: 'tvGuide',
              sorters: 'tvDay',
              // autoLoad: true,
              getGroupString: function(record) { return record.get('tvDay'); },
              proxy: {
                  type: 'ajax',
                  url: 'http://localhost/HTML5/test.txt',
                  reader: {
                      type: 'json',
                      root: 'fixtures'
                  }
              },
              filters: [
                  {
                      property: 'tvSport',
                      value: 'Football'
                  }
              ]
          });
	    
	    var tvList = new Ext.List({
	    	                xtype: 'list',
	    	                store: tvStore,
	    	                disableSelection: true,
	    	                scroll: 'vertical',
	    	                listeners: {
	    	                    itemtap: function(list, index, item, e) {
	    	                        var tvData = tvStore.getAt(index).data;
	    	                        var tvMsg = tvData.tvFixture.replace('<br />',' v ');
	    	                        tvMsg += '<br />' + tvData.tvComp;
	    	                        tvMsg += '<br />' + tvData.tvTime;
	    	                        Ext.Msg.alert(tvData.tvChannel,tvMsg,Ext.emptyFn);
	    	                    }
	    	                },
	    	                itemTpl: '<table width="100%" style="background-image:url(chan/{tvIcon});background-position:right center;background-repeat:no-repeat;"><tr><td width="54" height="58" style="text-shadow:none;color:#666;font-size:16px;line-height:16px;">{tvTime}</td><td style="color:#222;text-shadow:none;">{tvFixture}</td></tr></table>',
	    	                grouped: true,
	    	                height: 314
	    	            });
	       //tvTitle componet
	       var tvTitle = new Ext.Panel({
	           html: 'Football on all networks',
	           xtype: 'panel',
	           styleHtmlContent: true,
	           styleHtmlCls: 'titlePanel',
	           cls: 'titlePanel'
	       });
	       var tvPicker = new Ext.Picker({
	    	                   height: 280,
	    	                   doneButton: 'Search...',
	    	                   listeners: {
	    	                       "hide": function(tvPicker) {
	    	                           tvList.scroller.scrollTo( {x:0,y:0},false );
	    	                           var tvS = tvPicker.getValue().tvSport;
	    	                           var tvC = tvPicker.getValue().tvChannel;
	    	                           var tvD = tvS;
	    	                           if(tvD=='American Football') tvD = 'NFL';
	    	                           tvTitle.update(tvD + ' on ' + tvC);
	    	                           if(tvC=='all networks') {
	    	                               tvStore.clearFilter();
	    	                               tvStore.filter('tvSport', tvS);
	    	                           }
	    	                           else {
	    	                               tvStore.clearFilter();
	    	                               tvStore.filter('tvSport', tvS);
	    	                               tvStore.filter('tvGroup', tvC);
	    	                           }
	    	                       }
	    	                   },
	    	                   slots: [
	    	                       {
	    	                           name: 'tvSport',
	    	                           title: 'Sport',
	    	                           data: [
	    	                               { text: 'Football', value: 'Football' },
	    	                               { text: 'Rugby', value: 'Rugby' },
	    	                               { text: 'Tennis', value: 'Tennis' },
	    	                               { text: 'Cricket', value: 'Cricket' },
	    	                               { text: 'Golf', value: 'Golf' },
	    	                               { text: 'Fighting', value: 'Fighting' },
	    	                               { text: 'NFL', value: 'American Football' }
	    	                           ]
	    	                       }, {
	    	                           name: 'tvChannel',
	    	                           title: 'Channel',
	    	                           data: [
	    	                               { text: 'All networks', value: 'all networks' },
	    	                               { text: 'Sky Sports', value: 'Sky Sports' },
	    	                               { text: 'ESPN', value: 'ESPN' },
	    	                               { text: 'Terrestrial', value: 'Terrestrial' }
	    	                           ]
	    	                       }
	    	                   ]
	    	               });

</script>
</head>
<body>
</body>
</html>
